    <template>
      <div id="app">
          <div class="contain">
            <!-- 左侧列表 -->
            <div class="list-box">

              <!-- 添加资产 -->
              <form class="my-form">
                <input type="text" class="form-control" placeholder="消费名称" v-model="name" />
                <input type="text" class="form-control" placeholder="消费价格" v-model="price"/>
                <button type="button" class="btn btn-primary" @click="addBill">添加账单</button>

              </form>

              <table class="table table-hover">
                <thead>
                  <tr>
                    <th>编号</th>

                    <th>消费名称</th>

                    <th>消费价格</th>

                    <th>操作</th>

                  </tr>

                </thead>

                <tbody>
                  <tr v-for="item in list" :key="item.id">
                    <td>{{ item.id }}</td>

                    <td>{{item.name}}</td>

                    <td>{{ item.price }}</td>

                    <td><a href="javascript:;" @click="deleteBill(item.id)">删除</a></td>

                  </tr>

              

                </tbody>

                <tfoot>
                  <tr>
                    <td colspan="4">消费总计： 298.00</td>

                  </tr>

                </tfoot>

              </table>

            </div>


          </div>

        </div>
    </template>

    <script>
    import axios from 'axios';
    export default {
      data() {
        return {
          //定义数据
          list: [],
          name: '',
          price: ''
        }
      },
      methods: {
        async getList() {
          let res = await axios({ url: 'https://applet-base-api-t.itheima.net/bill', params: { creator: 'zs' } })
          this.list = res.data.data
        },
        async created() {
          this.getList()
        },
        async addBill() {
          await axios({
            url: 'https://applet-base-api-t.itheima.net/bill',
            method: 'post',
            data: {
              name: this.name,
              price: this.price,
              creator: 'zs'
            }
          })
          this.getList()
        },
        async deleteBill(id) { 
      await axios({url:`https://applet-base-api-t.itheima.net/bill/${id}`,method:'DELETE'})
       this.getList();
        }
      }
    }
    </script>

    <style lang="scss" scoped>

    </style>